<template>
  <div class="edit-box">
    <n-scrollbar style="height: 73%">
      <div class="editor">
        <div ref="chatEditor" :id="id" @keydown.enter="keyDown($event)" @click="onFous" />
        <input ref="upload" @change="handleChange" type="file" style="opacity: 0; display: none" />
      </div>
    </n-scrollbar>

    <n-tooltip :show="state.showPopover" placement="bottom">
      <template #trigger>
        <n-button type="success" class="send-btn" title="按enter键发送，按ctrl+enter键换行" @click="sendVerify"
          :color="store.theme == 'default' ? '#18A058' : '#409EFF'">发送(S)</n-button>
      </template>
      <span> 不能发送空白消息 </span>
    </n-tooltip>
  </div>
</template>
<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive, watch } from 'vue';
import { useMainStore } from '../store';
import Conversition from '../class/Conversition';
import { useMessage } from "naive-ui"
const messageBox = useMessage()
const store:any = useMainStore();
defineProps<{
  value: string;
  id: string;
  height: number;
  placeholder: string;
}>();
const { proxy }: any = getCurrentInstance()
const state = reactive({
  editor: {},
  data: "",
  showPopover: false
})
onMounted(() => {
  store.initEditor();
  proxy.$nextTick(() => {
    store.chatEditor = proxy.$refs.chatEditor;
  });
})
function handleChange() {
  let file = proxy.$refs.upload.files[0];
}
watch(() => proxy.value, (newVal, oldVal) => {
  if (proxy.value !== store.editorData) {
    store.editorData = proxy.value;
    if (store.editor && store.editor.txt) { // 确保store.editor和store.editor.txt都存在
      store.editor.txt.html(store.editorData);
    }
  }
});
function sendVerify() {//校验并发送
  let sendContent = store.editor.txt.html()
  let reciverId = store.reciver?.FormId || store.reciver.Id
  if (sendContent.trim() == '') {
    state.showPopover = true
    setTimeout(() => {
      state.showPopover = false
    })
    return
  }
  else {
    let noCode = +new Date() + ""
    let conversition = new Conversition(
      store.sender.Id,
      reciverId,
      sendContent,
      0,
      0,
      noCode,
      "",
      "",
      "",
      "",
      "",
      false, store.sender.Avatar
    )
    if (store.socket == null) {
      messageBox.warning("无当前会话")
      return
    }
    store.sendLocal(conversition)
    store.sendInfo(conversition)
  }
  clear()
}
function clear() {
  try {
    return store.editor.txt.clear();
  } catch (e) {
    console.warn(e);
  }
} function onFous() {
  store.expressionShow = false;//取消表情包显示
}
</script>
<style scoped lang="less">
.edit-box {
  position: relative;
  width: 100%;
  height: 70%;
  border: 1px solid #ccc;

  .editor {
    text-align: left;
  }

  .send-btn {
    position: absolute;
    bottom: 5px;
    right: 10px;
  }
}
</style>